<template>
  <div>
    <div >
      <el-form :inline="true">
        <el-form-item label="卷号">
          <coilNextPre ref="coilNextPre" :mat-no="mat_no" @search="CoilSeach"/>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-show="isShow" v-model="radio" @change="radioData">
        <el-radio :label="'ys'">屈服</el-radio>
        <el-radio :label="'ts'">抗拉</el-radio>
        <el-radio :label="'el'">延伸</el-radio>
        <el-radio :label="'ie'">冲击功</el-radio>
      </el-radio-group>
      <div id="heat" :style="{width: '100%', height: isShow?'calc(100vh - 190px)':'calc(100vh - 170px)'}"/>
    </div>

  </div>
</template>

<script>
import BaseSearch from "@/components/BaseSearch";
import coilNextPre from "@/components/coilNextPre";
import themeEcharts from "@/assets/css/themeEcharts";
import { post } from "@/lib/Util";
import _ from "lodash";
export default {
  name: "IndHide",
  components: {
    BaseSearch,
    coilNextPre
  },
  props: {
    /* sootList: {
      type: Object,
      default: null
    },*/
    info_mat_no: {
      type: String,
      default: ""
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mat_no: "",
      sootListdata: {},
      radio: "ys",
      Axis: [],
      isEcarts: false
    };
  },
  watch: {
    info_mat_no: {
      handler(newVal, oldVal) {
        this.mat_no = this.info_mat_no;
      },
      deep: true,
      immediate: true
    }
    /* sootList: {
      handler(title) {
        this.$nextTick(() => {
          this.heat()
        })
      },
      deep: true
    }*/
  },
  beforeDestroy() {
    if (this.isEcarts && document.getElementById("heat") !== null) {
      console.log(
        document.getElementById("heat"),
        "document.getElementById('heat')"
      );
      const dcharts = this.$echarts.getInstanceByDom(
        document.getElementById("heat")
      );
      console.log(dcharts, "dchartsdchartsdcharts");
      if (dcharts) {
        this.$echarts.dispose(dcharts);
      }
    }
  },
  mounted() {
    // localStorage.setItem('sootListdata', JSON.stringify(this.sootListdata))// 保存数据
    // localStorage.getItem('sootListdata')// 读取数据
    // console.log(JSON.parse(localStorage.getItem('sootListdata')))
  },
  methods: {
    // 查询工艺分布数据
    async findMppMap(info_mat_no, mppType) {
      this.mat_no = info_mat_no;
      const mockData = await post("/python/mppHsm/coilMppMap", {
        info_mat_no: info_mat_no,
        type: mppType
      });
      console.log(mockData, "mockData");
      if (mockData === undefined) {
        return false;
      }
      const lenIndex = parseInt(mockData.lPosition.length / 4);
      const widIndex = parseInt(mockData.wPosition.length / 4);
      this.length = mockData.lPosition[lenIndex];
      this.width = mockData.wPosition[widIndex];
      this.mat_no = mockData.info_mat_no;
      const serData = [];
      const sootList = {};
      mockData.mpp.map((item, index) => {
        item.map((item2, index2) => {
          serData.push([index2, index, item2]);
        });
      });
      sootList.xAxis = mockData.wPosition;
      sootList.yAxis = mockData.lPosition;
      sootList.seriesData = serData;
      this.sootListdata = sootList;
      this.$nextTick(() => {
        this.heat();
      });
      this.$emit(
        "resData",
        this.length,
        this.width,
        sootList,
        mockData.info_mat_no,
        lenIndex,
        widIndex
      );
    },
    CoilSeach(matNo) {
      this.$emit("queryBtn", matNo);
      this.mat_no = matNo;
      // this.findMppMap(this.info_mat_no, this.radio)
    },
    search() {
      // 搜索条件改变时
      const info_mat_no = this.$refs.coilNextPre.getMatNo();
      this.$emit("queryBtn", info_mat_no);
      this.findMppMap(info_mat_no, this.radio);
    },
    radioData() {
      console.log("radio选项", this.radio);
      this.findMppMap(this.mat_no, this.radio);
    },
    // 所属业务
    heat() {
      if (this.sootListdata.seriesData === undefined) {
        return false;
      }
      this.isEcarts = true;
      if (document.getElementById("heat") === null) {
        return false;
      }
      let Chart = this.$echarts.getInstanceByDom(
        document.getElementById("heat")
      );
      if (!Chart) {
        Chart = this.$echarts.init(
          document.getElementById("heat"),
          themeEcharts
        );
        this.$once("hook:beforeDestroy", () => {
          this.$echarts.dispose(Chart);
        });
      }
      Chart.on("click", params => {
        const wData = this.sootListdata.xAxis[params.value[0]];
        const lData = this.sootListdata.yAxis[params.value[1]];
        this.$emit(
          "PointResults",
          [wData, lData],
          params.value[1],
          params.value[0]
        );
        Chart.setOption({
          series: [
            {
              markPoint: {
                symbolSize: 70,
                data: [
                  {
                    name: "当前位置",
                    yAxis: params.value[1],
                    xAxis: params.value[0],
                    value: [lData, wData],
                    label: {
                      show: true,
                      formatter: function(param) {
                        return params.value[2];
                      }
                    }
                  }
                ]
              },
              markLine: {
                symbol: "none",
                label: {
                  show: false
                },
                lineStyle: {
                  width: 3,
                  type: "solid",
                  color: "black"
                },
                data: [
                  {
                    name: "某个坐标",
                    yAxis: params.value[1],
                    value: "标记1"
                  },
                  {
                    name: "某个坐标",
                    xAxis: params.value[0],
                    value: "标记1"
                  }
                ]
              }
            }
          ]
        });
        // const pointInPixel = [params.offsetX, params.offsetY]
        // if (heat.containPixel('grid', pointInPixel)) {
        //   // 点击第几个柱子
        //   heat.convertFromPixel({ seriesIndex: 0 }, pointInPixel)

        //   // console.log(pointInGrid)
        //   // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
        //   // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
        //   // x轴数据的索引
        // }
      });

      const minMax = _.sortBy(
        JSON.parse(JSON.stringify(this.sootListdata.seriesData)),
        [2]
      );
      if (minMax.length === 0) {
        return false;
      }
      const min = minMax[0][2];
      const max = minMax[minMax.length - 1][2];
      const xIndex = parseInt(this.sootListdata.xAxis.length / 4);
      const yIndex = parseInt(this.sootListdata.yAxis.length / 4);
      const xData = this.sootListdata.xAxis[xIndex];
      const yData = this.sootListdata.yAxis[yIndex];
      const preData = this.sootListdata.seriesData[yIndex * xIndex][2];

      var radioMppLabel = {
        ys: "屈服",
        ts: "抗拉",
        el: "延伸",
        ie: "冲击功"
      };
      var vm = this;
      Chart.setOption({
        tooltip: {
          position: "top",
          confine: true,
          formatter: function(params) {
            if (params.componentSubType === "heatmap") {
              let valData = params.value;
              if (typeof valData === "string") {
                valData = params.value.split("，");
              }
              var relVal =
                "宽度方向：" +
                vm.sootListdata.xAxis[valData[0]].toFixed(0) +
                "<br/>" +
                "长度方向：" +
                vm.sootListdata.yAxis[valData[1]].toFixed(0) +
                "<br/>" +
                radioMppLabel[vm.radio] +
                "：" +
                valData[2].toFixed(2);
              return relVal;
            }
          }
        },
        animation: false,
        grid: {
          left: 0,
          right: 30,
          top: 20,
          bottom: 50,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.sootListdata.xAxis,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: this.sootListdata.yAxis
        },
        visualMap: {
          min: min,
          max: max,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "0%",
          realtime: false,
          inRange: {
            color: [
              "#0071ff",
              "#00e3ff",
              "#00ffaa",
              "#aaff00",
              "#ffe400",
              "#ff7200"
            ]
          }
        },
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: this.sootListdata.seriesData,
            emphasis: {
              itemStyle: {
                borderColor: "#333",
                borderWidth: 1
              }
            },
            markPoint: {
              symbolSize: 70,
              data: [
                {
                  name: "当前位置",
                  yAxis: yIndex,
                  xAxis: xIndex,
                  value: [yData, xData],
                  label: {
                    show: true,
                    formatter: function(param) {
                      return preData;
                    }
                  }
                }
              ]
            },
            markLine: {
              symbol: "none",
              lineStyle: {
                width: 3,
                type: "solid",
                color: "black"
              },
              data: [
                {
                  name: "某个坐标",
                  yAxis: yIndex,
                  value: "标记1"
                },
                {
                  name: "某个坐标",
                  xAxis: xIndex,
                  value: "标记1"
                }
              ]
            },
            progressive: 1000,
            animation: false
          }
        ]
      });
    },
    // 查询上一卷下一卷
    preNext(type) {
      console.log(type, "preNext");
    }
  }
};
</script>

<style scoped>
/deep/.el-radio {
  margin-right: 7px;
}
/deep/.el-input-group__append {
  padding: 0px;
}
/deep/.el-input-group__prepend {
  padding: 0px;
}
</style>
<style>
.xw_inputPreNext .xw_divBtn {
  width: 21px;
}
</style>
